<Page
    x:Class="AppStudio.Views.FacebookDetail"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppStudio.Views"
    xmlns:controls="using:AppStudio.Controls"    
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

  <Grid Background="{StaticResource AppBackground}">
    <Grid.ChildrenTransitions>
      <TransitionCollection>
        <EntranceThemeTransition/>
      </TransitionCollection>
    </Grid.ChildrenTransitions>

    <Grid.RowDefinitions>
      <RowDefinition Height="140"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <FlipView x:Name="Flip" Grid.RowSpan="2" AutomationProperties.AutomationId="ItemsFlipView" AutomationProperties.Name="Item Details" TabIndex="1"
              DataContext="{Binding FacebookModel}"
              ItemsSource="{Binding Items}"
              SelectedItem="{Binding SelectedItem, Mode=TwoWay}">

        <FlipView.ItemContainerStyle>
          <Style TargetType="FlipViewItem">
            <Setter Property="Margin" Value="0,140,0,0"/>
          </Style>
        </FlipView.ItemContainerStyle>
 
        <FlipView.ItemTemplate>
            <DataTemplate>
                <Grid Margin="20,0,40,40">                   
                        <ContentPresenter ContentTemplate="{StaticResource Facebook1DetailDetail}" />
                 </Grid>
            </DataTemplate>
        </FlipView.ItemTemplate>
      
    </FlipView>

    <!-- Back button and page title -->
    <Border x:Name="HeaderHost" Padding="40,60,40,0" Grid.Row="0">
        <ContentPresenter ContentTemplate="{StaticResource PageHeader}" Content="{Binding NavigationHelper}" />
    </Border>

    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup>
        <VisualState x:Name="SnappedView">
          <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Flip" Storyboard.TargetProperty="ItemTemplate">
              <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                  <DataTemplate>
                    <ScrollViewer HorizontalScrollBarVisibility="Disabled">
                      <ContentPresenter ContentTemplate="{StaticResource Facebook1DetailDetail}" />
                    </ScrollViewer>
                  </DataTemplate>
                </DiscreteObjectKeyFrame.Value>
              </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
        <VisualState x:Name="FullscreenView">
        </VisualState>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
  </Grid>

  <Page.BottomAppBar>
    <CommandBar Background="{StaticResource AppBarBackground}">
      <AppBarButton DataContext="{Binding FacebookModel}" x:Uid="GoToSourceButton" Visibility="{Binding GoToSourceVisibility}"
                    Command="{Binding GoToSourceCommand}">
        <AppBarButton.Icon>
          <BitmapIcon UriSource="ms-appx:///Assets/AppBar/GoToSource.png"/>
        </AppBarButton.Icon>
      </AppBarButton>
    </CommandBar>
  </Page.BottomAppBar>
</Page>
